<template>
  <div>
    <!-- <news></news> -->
    <!-- {{ $route.query.dateTitle }} -->
    <div v-if="finish">
      <div class="box" v-for="(item, index) in content" :key="item.id">
      <div>
        <h2
          style="display: inline; padding: 0px 0px 20px 0px; cursor: pointer"
          @click="routernewsitem(item.content.title, item.datatime, item)"
        >
          {{ item.content.title }}
        </h2>
        <p style="padding: 10px 15px 0px 0px">{{ item.content.content }}</p>
      </div>
      <div
        style="display: flex; flex-direction: column; justify-content: center"
      >
        <p style="display: inline">{{ item.content.data }}</p>
      </div>
    </div>
    <div class="example-pagination-block">
      <el-pagination
        layout="prev, pager, next"
        :current-page="page"
        :pager-count="size"
        @current-change="changePage"
        :total="total"
      />
    </div>
    </div>
    <div v-else>数据请求中...</div>
    
  </div>
</template>


<script setup>
import { onMounted } from "vue";
import formatDate from "../../../utils/datefileter";


onMounted(() => {});
definePageMeta({
  layout: "article",
});
const route = useRoute();
console.log(route, "listroute");
const router = useRouter();
let has = ref();
let page = ref(1);
let size = ref(8);
let total = ref(0);
let year = route.query.dateTitle?.replace("年", "/").replace("月", "");
let classifyname = route.query.classifyname;
const finish = ref(false)
let list = reactive({
  page: page.value,
  size: size.value,
  path: route.params.secondNumber,
  dateTitle: year || false,
  classifyname: classifyname,
});


let content = ref([]);


let result = await useFetch("/api/post/gettotal", {
  method: "post",
  headers: {
    "Content-Type": "application/json",
  },
  body: list,
});


result.data.value?.data.forEach((v) => {
  if (typeof v.content === "string") {
    try {
      v.content = JSON.parse(v.content);
    } catch (error) {
      console.error("解析 JSON 失败:", error);
      // 处理错误，例如设置 v.content 为一个默认值或空对象
      v.content = {};
    }
  }
});


if (result.data.value?.code == 2000) {
  content.value = result.data.value?.data;
  total.value = result.data.value.count[0].count;
  finish.value = true


  // console.log("content", content);
} else if (result.data.value?.code == 4003) {
  alert("报错了");
}


const changePage = async (val) => {
  list.page = val;
  page.value = val;
  await getPage();
};


async function getPage() {
  let result = await useFetch("/api/post/gettotal", {
    method: "post",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(list),
  });


  result.data.value?.data.forEach((v) => {
    if (typeof v.content === "string") {
      try {
        v.content = JSON.parse(v.content);
      } catch (error) {
        console.error("解析 JSON 失败:", error);
        // 处理错误，例如设置 v.content 为一个默认值或空对象
        v.content = {};
      }
    }
  });


  if (result.data.value?.code == 2000) {
    content.value = result.data.value?.data;
    total.value = result.data.value.count[0].count;
  }
}


////跳转前往新闻内部
async function routernewsitem(title, time, item) {
  if (item.classifyName) {
    const formattedDateStr = formatDateriqi(item.content.data); //过滤时间转化
    await navigateTo({
      path: "/" + formattedDateStr + "/" + title,
    });
    setTimeout(() => {
      router.go(0);
    }, 100);
  } else if (time == undefined) {
    const formattedDateStr = formatDateriqi(item.content.data); //过滤时间转化
    await navigateTo({
      path: "/" + formattedDateStr + "/" + title,
    });
    setTimeout(() => {
      router.go(0);
    }, 100);
  } else {
    await navigateTo({
      path: "/" + time + "/" + title,
    });
    setTimeout(() => {
      router.go(0);
    }, 100);
  }
  // router.push('/'+ time+'/'+title)
}


///////////////////转化时间
function formatDateriqi(dateStr) {
  // 假设dateStr的格式为"月 日, 年份"
  let parts = dateStr.match(/^(\d+月) (\d+), (\d+)$/);

  if (!parts) {
    parts = dateStr.match(/^(\d+月)(\d+),(\d+)$/);
    if(!parts){
      throw new Error("无效的日期格式");

    }
  }


  const month = parseInt(parts[1].replace("月", ""), 10);
  const year = parseInt(parts[3], 10);


  // 格式化日期为"YYYY/MM"
  const formattedDate = `${year}/${String(month).padStart(2, "0")}`;
  return formattedDate;
}
</script>


<style scoped lang="scss">
.box {
  display: flex;
  justify-content: space-between;
  padding: 30px;
  box-shadow: 0px 0px 10px #ccc;
  margin-bottom: 30px;


  h2 {
    font-size: 18px;
    font-weight: 900;
    padding-bottom: 20px;
  }
  p {
    color: #ccc;
    font-size: 12px;
  }
}
</style>
